<template>

	<van-tabs v-model:active="active" :before-change="beforeChange" @click="chuxian">
		<van-tab v-for="index in shuju" :title="index.title" :key="index" :ind="index">
			<div v-show="index.title==='购物车'" ref="container">
				<!--          <van-sticky :container="container" :offset-top="65">-->
				<div v-show="shoppingGroup!=null">
					<div class="list_one" v-show="shoppingGroup!=null">
						<div>
							<van-image width="36px" height="36px" fit="cover" :src="Rabbit" />
							<p style="font-weight: bold;font-size:24px">外卖<span
									style="font-size: 16px;color: #999999">送上门</span>
							</p>
						</div>
						<div class="shop">
							<p class="title" style="font-size: 12px;color: #999999; width: 150px">送至:北大青鸟三楼2306的四号床</p>
							<van-icon name="arrow" color="#999999" />
						</div>
					</div>
					<!--          1-->
					<div class="list">
						<div class="list_two" v-for="xiao in list" :key="xiao">
							<div>
								<van-checkbox v-model="xiao.checks" checked-color="#ffd101" @click="qian">
									<div class="shop">
										<p class="title">{{xiao.shop.shopName }}</p>
										<van-icon name="arrow" color="#999999" />
									</div>
									<div class="manJiang">
										<van-tag color="#ffefeb" text-color="#fe3c00">满减</van-tag>
										<span>25减3</span>
										<span>45减5</span>
									</div>
								</van-checkbox>
							</div>
							<div class="byy">
								<lazy-component>
									<van-checkbox v-model="xiao.checks" checked-color="#ffd101" label-disabled>
										<van-card :price="xiao.dishes.price" :desc="xiao.dishes.title"
											:title="xiao.dishes.dishesName" :thumb="xiao.dishes.dishesPhotoOrVideoUrl"
											:origin-price="xiao.dishes.startingPrice" :num="xiao.orderNumber">
											<template #footer>
												<van-stepper v-model="xiao.orderNumber" />
												<!-- <van-button size="mini">按钮</van-button> -->
											</template>
										</van-card>

									</van-checkbox>
								</lazy-component>
							</div>
						</div>
					</div>
					<!--          </van-sticky>-->
					<van-sticky position="bottom">

						<van-submit-bar :price="sumAmount" button-text="结算"
							@click="jiesuan(cartId,orderNumber,dishesId,shopId,number)">
              <div v-show="del" class="shangchu">
                <van-button plain type="warning" @click="deleteFileOrDirectory(sum)">删除
                </van-button>
                <!-- <van-button plain type="primary">移除收藏(<span>0</span>)</van-button> -->
              </div>
							<!-- <van-checkbox v-model="checked1" @click="quanxuan()">全选</van-checkbox> -->
							<template #tip>
								<van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="gold-coin">
									<span>米袋虽空——樱花开哉！</span>
									<van-tag round color="#ffe1e1" text-color="#ad0000">标签</van-tag>
								</van-notice-bar>
							</template>
						</van-submit-bar>

					</van-sticky>
				</div>
				<van-empty v-show="xian1" image="https://img.yzcdn.cn/vant/custom-empty-image.png"
					description="快去选购吧" />
			</div>

      <div v-show="index.title==='收藏'">
        <div class="gw_box" v-show="shoucang!=null||shoucang!=''">
          <div class="list_three">
            <div class="aaaa" v-for="tu in shoucang" :key="tu">
              <van-checkbox v-model="tu.checked" checked-color="#ee0a24" v-show="shou" @click="dangxuan">
              </van-checkbox>
              <van-card :title="tu.shop_name" :thumb="tu.head_portrait">
                <template #tags>
                  <van-rate v-model="tu.evaluation_score" :size="15" color="#ffd21e" readonly allow-half />
                  <p><span>美团专送</span><span>
											<van-icon name="location-o" />{{tu.distance}}
										</span></p>
                </template>
              </van-card>

            </div>
            <van-empty v-show="show" image="https://img.yzcdn.cn/vant/custom-empty-image.png" description="暂无收藏" />
          </div>
        </div>

				<van-empty v-show="xian" image="https://img.yzcdn.cn/vant/custom-empty-image.png" description="暂无收藏" />
				<van-sticky :offset-bottom="60" position="bottom">
					<div v-show="shou">
						<van-button type="danger" block>删除</van-button>
					</div>
				</van-sticky>
			</div>
		</van-tab>
	</van-tabs>
	<!--shdfjsdk-->
	<div class="middle-bottom">
		<van-tabs v-model:active="active2" animated offset-top="80px">
			<van-tab title="精选">
				<div class="xihaung">
					<van-card v-for="index2 in store" :key="index2" :desc="index2.jiehsao" :title="index2.name"
						:thumb="index2.url" class="hezi">
						<template #tags style="margin-bottom: 0px">
							<van-tag plain type="danger">{{ index2.label1 }}</van-tag>
							<van-tag plain type="danger">{{ index2.label2 }}</van-tag>
							<van-tag plain type="danger">{{ index2.label3 }}</van-tag>
						</template>
					</van-card>
				</div>
			</van-tab>
			<van-tab title="送上门">内容 2</van-tab>
			<van-tab title="次日自提">内容 3</van-tab>
			<van-tab title="到店吃">内容 3</van-tab>
		</van-tabs>
	</div>

	<!--  456665-->
</template>
<script>
	import {
		ref
	} from 'vue';
	import rabbit from "../assets/meituan.png";

	export default {
		data() {
			return {
				del: false,
				cartId: '',
				orderNumber: '',
				dishesId: '',
				userId: '',
				shopId: '',
				number: '',
				orderPrice: '',
				// shopName:'',
				// price:'',
				// title:'',
				// dishesName:'',
				// dishesPhotoOrVideoUrl:'',
				// startingPrice:'',
				list: [],
				sum: [],
				id: '',
				store: [{
						name: '长沙大计',
						jiehsao: '5.0分|月售9999+',
						label1: '12减12',
						label2: '新人减1',
						label3: '0折起',
						url: require("../assets/pikaqiu.png")
					},
					{
						name: '北大青鸟',
						jiehsao: '5.0分|月售9999+',
						label1: '12减12',
						label2: '新人减1',
						label3: '0折起',
						url: require("../assets/xiaomei.png")
					},
					{
						name: '北大青鸟',
						jiehsao: '5.0分|月售9999+',
						label1: '12减12',
						label2: '新人减1',
						label3: '0折起',
						url: require("../assets/xiaomei.png")
					},
				],
				Rabbit: rabbit,
				checked1: false,
				checked2: false,
				checked3: false,
				shou: false,
				xian: true,
				xian1: true,
				shoppingGroup: [{
						DianZi: "吃香喝辣",
						li: [{
							commodity: "大汉堡",
							url: require("../assets/pikaqiu.png")
						}, {
							commodity: "nb mmns",
							url: require("../assets/pikaqiu.png")
						}]
					},
					{
						DianZi: "吃香lll喝辣",
						li: [{
							commodity: "nb mmns",
							url: require("../assets/pikaqiu.png")
						}, {
							commodity: "nb mmns",
							url: require("../assets/pikaqiu.png")
						}]
					},
				],
				shoucang: [{
						dian: '书亦烧仙草(诚兴园店)',
						url: require("../assets/xiaomei.png")
					},
					{
						dian: '书亦烧仙草(诚兴园店)',
						url: require("../assets/xiaomei.png")
					},
					{
						dian: '书亦烧仙草(诚兴园店)',
						url: require("../assets/xiaomei.png")
					},
				]
			}
		},
		setup() {
			const container = ref(null);
			const xin = ref(5)
			const active = ref(0);
			const active1 = ref(0);
			const active2 = ref(0);
			const value = ref(1);
			const beforeChange = (index) => {
				// 返回 false 表示阻止此次切换
				if (index === 2) {
					return false;
				}

				// 返回 Promise 来执行异步逻辑
				return new Promise((resolve) => {
					// 在 resolve 函数中返回 true 或 false
					resolve(index !== 3);
				});
			};

			return {
				shuju: [{
						shu: "1",
						title: "购物车",
					},
					{
						shu: 2,
						title: "收藏",
					},
					{
						title: "管理",
					},
				],
				beforeChange,
				active,
				active1,
				active2,
				container,
				xin,
				value,
			};
		},
		dangxuan() {
			if (this.checked3 == false) {
				this.checked3 = true;
			}
		},
		computed: {
			sumAmount() {
				let sum = 0;
				this.list.forEach(item => {
					if (item.checks) {
						sum = sum + item.dishes.price * item.orderNumber;
						this.cartId = item.id;
						this.orderNumber = item.orderNumber;
						this.dishesId = item.dishesId;
						this.shopId = item.shopId;
						this.number = item.orderNumber;

						// alert(item.dishesId);
						// alert(item.id);
					}
				})
				return sum * 100;
			}
		},

		methods: {
      soucang() {
        this.show=false;
        this.$axios.get('/collection/list/userId')
            .then(res => {
              this.shoucang = res.result.list;
            }).catch(error => {
          console.log("error:" + error)
        })
      },
			jiesuan(cartId, orderNumber, dishesId, shopId, number) {
				this.$router.push({
					// path:'/shoppingCart',
					path: '/submitInfo',
					query: {
						cartId: cartId,
						orderNumber: orderNumber,
						dishesId: dishesId,
						shopId: shopId,
						number: number,
					}
				})
			},
			getShoppingCart() {
				// let userId = this.$route.query.id;
				// console.log("userId=" + userId);

				this.$axios.get('/shopping-cart/shopping', {
						// params: {
						// 	userId: 2
						// }
					})
					.then(res => {

						// console.log("data=" + res)
						this.list = res.result.list;

						console.log("this.list=" + res.list);
					}).catch(error => {
						console.log("error:" + error)
					})
			},
			chuxian(index) {
				if (index === 2) {
					if (this.shou === false) {
						this.shou = true;
					} else {
						this.shou = false;
					}
					if (this.js === true) {
						this.del = true
						this.js = false
					} else {
						this.del = false
						this.js = true
					}

				}
			},

			// 	selsChange(sels) {
			// 		this.sels = sels
			// 	},
			deleteFileOrDirectory() {
				// var ids1 = this.sels.map(item => item.id).join() //获取所有选中行的id组成的字符串，以逗号分隔
				this.list.forEach(item => {
					if (item.checks) {
						this.sum.push(item.id);
					}
				})
				this.$axios.get(`/shopping-cart/remove`, {

					params: {
						"ids": this.sum.join(',') //逗号分割string类型/${this.sum.join(',')}
						//ids: JSON.stringify(this.sum)
					}
				})
				// alert(this.cartId.map(item => item.id).join());
				this.$confirm('此操作将永久删除该文件及其子文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$message({
						message: "删除成功",
						type: 'success'
					})
					window.location.reload();
				})
			},


			quanxuan() {
				if (this.checked1 === true) {
					this.list.forEach(item => {
						item.checks = true;
					})
				} else {
					this.list.forEach(item => {
						item.checks = false;
					})
				}
				// let allCheckeds = this.list.filter(item =>{
				//   return item.checks;
				// })
				// console.log(allCheckeds);
			},
			chuang() {

			}
		},
		mounted() {
      this.soucang();
			this.getShoppingCart();
			if (this.shoucang == "") {
				this.xian = true;
			} else {
				this.xian = false;
			}
			if (this.shoppingGroup == "") {
				this.xian1 = true;
			} else {
				this.xian1 = false;
			}
		}
	};
</script>
<style>
	.van-tab {
		font-size: 18px;
		font-weight: bold;
	}

	.list {
		margin: 20px 10px 20px 10px;
		overflow: scroll;
		/*height: 580px;*/

	}

	.list_one {
		height: 50px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0px 10px 0px 10px;
	}

	.list_one div {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.list_three {
		display: flex;
		flex-direction: column;
	}

	.list_three .van-card__header {
		flex-direction: row;
	}

	.list_three .van-image__img {
		width: 80px;
		height: 80px;
		margin: 0;
	}

	.list_three .van-card__thumb {
		width: 80px;
		height: 80px;
	}

	.list_three .van-card {
		height: 105px;
		width: 100%;
	}

	.list_three .van-card__title {
		font-size: 18px;
		font-weight: bold;
		line-height: 18px;
		width: 200px;
		margin: 0;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;

	}

	.title {
		width: 200px;
		margin: 0;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.shop {
		display: flex;
		align-items: center;
	}

	.manJiang span {
		font-size: 14px;
		margin-right: 5px;
	}

	.van-card {
		width: 345px;
		height: 188px;
	}

	.byy .van-card__header {
		flex-direction: row;
		margin-bottom: 0;
	}

	.byy .van-card__thumb {
		width: 150px;
	}

	.byy .van-image__img {
		width: 150px;
		margin: 0;
	}

	.hezi {
		width: 190px;
		height: 210px;
	}

	.xihaung {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.xihaung .van-image__img {
		margin-left: 4px;
	}

	.van-card:not(:first-child) {
		margin: 0;
	}

	.van-card__thumb {
		width: 180px;
		height: 150px;
	}

	.van-card__header {
		flex-direction: column;
		align-items: center;
	}

	.van-submit-bar {
		bottom: 49px;
	}

	element.style {
		top: 50px
	}

	.middle-bottom {
		margin-bottom: 160px;
	}

	.aaaa {
		display: flex;
		flex-direction: row;
	}

	.shangchu {
		display: flex;
		flex-direction: row-reverse;
	}
</style>
